<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "雨水情监测",
    "navigationBarBackgroundColor": "#2563eb",
    "navigationBarTextStyle": "white"
  }
}
</route>

<script lang="ts" setup>
import { ref } from 'vue'

/**
 * 定义水库数据接口
 */
interface ReservoirData {
  name: string
  area: string
  time: string
  water: string
  flood: string
  diff: string
}

/**
 * 水库数据列表 - 根据截图生成的mock数据
 */
const dataList = ref<ReservoirData[]>([
  {
    name: '冲口水库',
    area: '随县-安居镇',
    time: '08-20 09:00',
    water: '82.37',
    flood: '82.3',
    diff: '0.07',
  },
  {
    name: '蒋家湾水库',
    area: '曾都区-南郊街道(办事处)',
    time: '08-20 09:25',
    water: '91.03',
    flood: '91',
    diff: '0.03',
  },
  {
    name: '杨坡岭水库',
    area: '广水市-郝店镇',
    time: '08-20 09:50',
    water: '109.87',
    flood: '109.87',
    diff: '0.00',
  },
  {
    name: '流沙冲水库',
    area: '广水市-广水街道办事处',
    time: '08-20 09:50',
    water: '108.10',
    flood: '108.1',
    diff: '0.00',
  },
  {
    name: '木头沟水库',
    area: '随县-草店镇',
    time: '08-20 09:45',
    water: '256.46',
    flood: '256.46',
    diff: '0.00',
  },
  {
    name: '曹家湾水库',
    area: '随县-万福店镇',
    time: '08-20 09:00',
    water: '137.09',
    flood: '137.1',
    diff: '-0.01',
  },
  {
    name: '马家湾水库',
    area: '随县-唐县镇',
    time: '08-20 09:00',
    water: '182.77',
    flood: '182.8',
    diff: '-0.03',
  },
  {
    name: '百鸽子湾水库',
    area: '广水市-陈巷镇',
    time: '08-20 09:00',
    water: '105.77',
    flood: '105.8',
    diff: '-0.03',
  },
  {
    name: '龙潭沟水库',
    area: '广水市-蔡河镇',
    time: '08-20 09:00',
    water: '107.57',
    flood: '107.6',
    diff: '-0.03',
  },
  {
    name: '园子河水库',
    area: '广水市-郝店镇',
    time: '08-20 09:50',
    water: '116.30',
    flood: '116.35',
    diff: '-0.05',
  },
  {
    name: '毛狗笼水库',
    area: '随县-吴山',
    time: '08-20 09:00',
    water: '167.74',
    flood: '167.8',
    diff: '-0.06',
  },
])

/**
 * 处理排序功能
 */
function handleSort() {
  // 实现排序逻辑，这里简单地重新排序数组
  dataList.value = [...dataList.value].reverse()
}

/**
 * 处理筛选功能
 */
function handleFilter() {
  // 实现筛选逻辑
  console.log('筛选功能')
}

const searchStr = ref('')
const menu = ref([
  {
    content: '随州市',
  },
  {
    content: '北京市',
  },
  {
    content: '上海市',
  },
])
const searchType = ref<string>(menu.value[0].content)
function changeSearchType({ item, index }: { item: { content: string }, index: number }) {
  searchType.value = item.content
  console.log(searchType.value)
}

const tabs = ['水情信息', '雨情信息']
const currentTab = ref(tabs[0])
function changeTab(tab: string) {
  currentTab.value = tab
}

const tableHeight = computed(() => {
  let navBarHeight = 0
  // #ifdef H5
  navBarHeight = 44
  // #endif
  const topSectionHeight = 48.5 + 58 + 38.5 + 12 + 16 + 10 // 标签页高度 + 搜索区域高度 + 筛选区域高度 + margin + padding + 预留高度
  return `calc(100vh - ${topSectionHeight + navBarHeight}px)`
})
</script>

<template>
  <view class="h-full bg-white">
    <!-- 标签页 -->
    <view class="flex">
      <view v-for="tab in tabs" :key="tab" class="flex-1 border-b-2 py-3 text-center" :class="{ 'border-blue-500 border-b-solid border-b-2 text-blue-500': currentTab === tab }" @click="changeTab(tab)">
        {{ tab }}
      </view>
    </view>

    <!-- 筛选区域 -->
    <view class="bg-gray-500">
      <!-- <view class="flex items-center space-x-2">
        <view class="flex items-center border border-gray-300 rounded bg-white px-3 py-2">
          <text>随州市</text>
          <text class="ml-1">▼</text>
        </view>
        <view class="flex flex-1 items-center border border-gray-300 rounded bg-white px-3 py-2">
          <text class="text-gray-400">请输入水库名称</text>
        </view>
        <view class="flex items-center border border-gray-300 rounded bg-white px-3 py-2">
          <text>流域</text>
          <text class="ml-1">▼</text>
        </view>
      </view> -->
      <wd-search v-model="searchStr" placeholder="请输入水库名称">
        <template #prefix>
          <wd-popover mode="menu" :content="menu" @menuclick="changeSearchType">
            <view class="search-type">
              <text>{{ searchType }}</text>
              <wd-icon custom-class="icon-arrow" name="fill-arrow-down" />
            </view>
          </wd-popover>
        </template>
      </wd-search>
    </view>
    <!-- 排序和筛选按钮 -->
    <view class="mt-3 flex items-center justify-between">
      <view class="flex items-center border border-gray-300 rounded bg-white px-3 py-2" @click="handleSort">
        <text>比汛限降序</text>
        <text class="ml-1">▼</text>
      </view>
      <view class="flex items-center border border-gray-300 rounded bg-white px-3 py-2" @click="handleFilter">
        <text>筛选</text>
        <text class="ml-1">▼</text>
      </view>
    </view>

    <!-- 表格数据 -->
    <view class="p-2">
      <wd-table :data="dataList" :height="tableHeight" :index="{ align: 'center', width: 60 }">
        <wd-table-col prop="name" label="水库名称" align="center" />
        <wd-table-col prop="area" label="行政区划" align="center" width="160" />
        <wd-table-col prop="time" label="时间" align="center" width="120" />
        <wd-table-col prop="water" label="水位" align="center" width="100" />
        <wd-table-col prop="flood" label="汛限(m)" align="center" width="100" />
        <wd-table-col prop="diff" label="比汛限(m)" align="center" width="100" />
      </wd-table>
    </view>
  </view>
</template>

<style lang="scss" scoped>
:deep(.wd-search__block) {
  padding: 4px 10px;
}
</style>
